Am Ende des Regenbogens







Johannes Kröger
HafenCity Universität Hamburg
Labor für Geoinformatik und Geovisualisierung

johannes.kroeger@hcu-hamburg.de | @cartocalypse | hannes.enjoys.it
https://hannes.enjoys.it/talks/2018 scicar/Am Ende des Regenbogens/

Farben, überall Farben

Source: Screenshot of Google Image Search

Typen

Typen

Kategorisch ("qualitativ")

  • Für ~nominale Daten
    • Frauen, Männer, Eichhörnchen, ...
    • Auto, Fahrrad, Bahn, ...
    • Eiche, Buche, Tanne, ...
  • Jede Klasse ist eine gleichwertige Kategorie
  • Verschiedene Farbtöne
  • Möglichst keine implizierte Rangfolge
  • Möglichst ähnliche helle Farben

Sequenziell

  • Für ~ordinale oder ~Intervall-Daten
    • A, B, C, ...
    • 1, 4, 12, 42, ...
  • Jede Klasse hat einen Rang (mehr/weniger) zu ihren Nachbarn
  • Verschiedene Farbabstufungen
  • Abstufung primär über Helligkeit

Divergent ("bipolar")

  • Für ~Ratio-Daten
    • -1, 0, 1, ...
    • Schlecht, Neutral, Gut, ...
    • 10, 40 (Grenzwert!**), 1000
  • Es gibt einen Nullpunkt oder anderweitig kritischen Wert
  • Dort Wechsel des Farbtons
    • Quasi zwei sequentielle Farbschemata, die auf neutrale Mitte zu laufen
  • Dort meist neutraler Farbton sinnvoll
  • Oder bei z.B. Grenzwert ein harter Bruch

Zyklisch

  • Für zyklische Daten
  • Relativ gesehen ist alles gleichwertig, aber es gibt eine zyklische Reihenfolge
    • Von "23 Uhr" bis "1 Uhr" ist genauso lang wie "9 Uhr" bis "11 Uhr"
  • Rangfolge möglich (0 Uhr ist doof, 9 Uhr ist besser)
  • Z.B.: Regenbogen..., Cubehelix, Twilight (ganz neu in matplotlib), cmocean

Bivariat

Welche Eigenschaften sollte ein Farbschema haben

Welche Eigenschaften sollte ein Farbschema haben

Unterscheidbarkeit

  • Die Farben sollten unterscheidbar sein
  • Die Farben sollten identifizierbar sein

  • Faustregel: Maximal verschiedene 12 Farben
  • Faustregel: 5-7 Farbabstufungen
  • Unklassifizierte, kontinuierliche Farbskalen sind selten sinnvoll

  • Farbabstände sind messbar!
  • Farbsehschwächen sind kompliziert...

Farbabstände

Für die Unterscheidbarkeit der Farben sollten ihre Farbabstände untereinander gleichmäßig sein und ein Mindestmaß nicht unterschreiten
  • In geeignetem Farbraum berechnen (CIEDE2000)!(!!!!)
  • Delta E 101 ist ein toller Überblick
    Delta E Perception
    <= 1.0 Not perceptible by human eyes.
    1 - 2 Perceptible through close observation.
    2 - 10 Perceptible at a glance.
    11 - 49 Colors are more similar than opposite
    100 Colors are exact opposite
  • Kein einfaches Tool verfügbar?
    • Wer ein bisschen programmieren kann, findet für Python, R oder JavaScript hervorragende Bibliotheken
https://gist.github.com/kannes/ac507b6afe2b19d5eec956ee9ae7b348
I want Hue
Colour Hospital (offline)
Einen "Kreuzplot" hatte ich im Rahmen meiner Bachelorarbeit erdacht

http://www.colormunki.com/game/huetest_kiosk

Farbsehschwächen

  • 5-10% der weißen Männer haben Farbsehschwächen
  • Rote und grüne Farbtöne können schwer/nicht unterschieden werden
  • Helligkeitsunterschiede!
  • Weitere Kodierung(en)
  • Es gibt Simulationen (z.B. ColorOracle)
  • Es gibt "sichere" Farben und Farbachsen, z.B. Orange-Blau
  • Es gibt Versuche Grafiken automatisiert in unterscheidbare Farben zu transformieren (z.B. gmculp/OGA_recolor)

Jenny, B. and Kelso, N. V. (2007). Color design for the color vision impaired. Cartographic Perspectives, 58.

http://bl.ocks.org/gmculp/raw/8271673/


This visualization shows the minimum CIEDE2000 color difference of a diverging palette re-colored with the OGR algorithm as perceived by the three types of dichromatic vision (simulated according to Brettle et al, 1997).

Farbunterschiede 🗘 Wertunterschiede

  • Die "gefühlten" Unterschiede zwischen Farben sollten den Unterschieden der Werte bestmöglich entsprechen
  • Schlecht:
    • Kleine relative Unterschiede in Daten haben stark unterschiedliche Farben
    • Kaum unterscheidbare Farben markieren große relative Werteunterschiede der Daten
  • "Perceptually uniform"er An- oder Abstieg

Helligkeit optimieren

https://gka.github.io/palettes/

Skalentypen

  • Die Farbskala sollte dem Skalentyp der Daten entsprechen
  • Die Farbskala muss dem Skalentyp der gewollten Aussage entsprechen

Konventionen folgen

  • Gibt es für das darzustellende Thema bestimmte Farbkonventionen, so sollten diese verwendet werden
  • Ausnahmen bestätigen die Regel: Sofern diese⤴ nicht bewiesenermaßen schlecht sind
  • Ausnahmen bestätigen die Regel: Sofern das⤴ im Vergleich zum Wiedererkennungswert irrelevant ist
  • Regenbogen, Ampel, Pink/Blau, u.ä.
  • Hat die Disziplin bereits Schema auf moderner Forschung? Z.B. Beautiful colormaps for oceanography: cmocean

Der Regenbogen

Der Regenbogen

NEIN

Der Regenbogen

  • Farbverläufe im Farbkreis (ohne Berücksichtigung der unterschiedlichen wahrgenommenen Helligkeit)
  • Kennt man auch als ROYGBIV, Spektrum, Rainbox, Jet u.ä., in jeweils ähnlichen Ausprägungen
  • Jede Regenbogenskala ist bisschen anders


Beispiele

  • Which horizontal oscillation (A, B, or C) has the highest amplitude?
  • Which horizontal oscillation (A, B, or C) is closest to a pure sinusoid?
  • In comparing plots A and C, which one starts high and goes low, and which one starts low and goes high?
  • Which horizontal oscillation (A, B, or C) has the highest amplitude?
  • Which horizontal oscillation (A, B, or C) is closest to a pure sinusoid?
  • In comparing plots A and C, which one starts high and goes low, and which one starts low and goes high?

Matlab

    Selbst Matlab hat 2014 die ehemalige "Jet"-Farbskala durch eine bessere ersetzt

Viridis

  • designed in such a way that it will analytically be perfectly perceptually-uniform, both in regular form and also when converted to black-and-white

Weitere Alternativen

cividis, cubehelix, sinebow u.v.m.

Beispiele

Beispiele

https://datawrapper.dwcdn.net/c8sgd/2/

https://datawrapper.dwcdn.net/dHIle/10/

rbb24.de/politik/thema/2017/abgasalarm/beitraege/abgasalarm-Stickoxid-Werte-in-Berlin-flaechendeckend-zu-hoch.html

http://www.spiegel.de/kultur/gesellschaft/deutschland-spricht-kuck-mal-wer-da-spricht-eine-datenanalyse-a-1228590.html

http://www.spiegel.de/kultur/gesellschaft/deutschland-spricht-kuck-mal-wer-da-spricht-eine-datenanalyse-a-1228590.html

https://www.sueddeutsche.de/

https://unfallatlas.statistikportal.de/


Wie man Daten klassifiziert wäre ein anderer Vortrag...

https://blog.datawrapper.de/weekly45-energy-consumption-of-IT-sector/

https://datawrapper.dwcdn.net/vUepn/1/

https://old.reddit.com/r/dataisbeautiful/comments/9hibzi/most_historically_unpopular_presidential/

Wie baue und bewerte ich ein Farbschema?

Tools ausprobieren!

ColorBrewer: Color Advice for Maps

  • Fertige Farbschemata
  • Nicht nur für Karten
  • Wissenschaftlich und ästhetisch
  • Bereits in vielen Tools und Bibliotheken integriert

i want hue

  • Erstellen von Farbschemata
  • Beschränkung des Farbtons -> Sequenziell
  • Bewertung der Unterscheidbarkeit
  • Komplexe Möglichkeiten...
  • Man kann (erzeugte) Farben festlegen

Colorgorical

  • Erzeugen optimierter kategorischer Paletten
  • Fixe Farben definierbar
  • Farbabstände
  • Ästhetik
  • Tip: Pipette-Symbol zeigt Farbrauminfos

Chroma.js Color Scale Helper

  • Optimieren von Farbverläufe
  • Eigentlich für mehrere Farbtöne
  • Interpoliert Farben schlau und schön
  • Auch wunderbar für einfache Abstufungen
  • Farbverlauf optimieren

VIZ PALETTE

  • Untersuchung von Farbpaletten
  • Verschiedene Diagramme
  • Simulation von Farbsehschwächen
  • Unterscheidbarkeit
  • Benennbarkeit

viscm

  • A tool for visualizing and designing colormaps using colorspacious and matplotlib
  • Visualisierung verschiedener Parameter
  • Einfärben ausgewählter Dummydaten
  • Für die Entwicklung von viridis entwickelt
from viscm import viscm
import matplotlib.pyplot as plt
from matplotlib import cm
cmap = cm.get_cmap("cubehelix")
viscm(cmap)
plt.show()